<template>
  <div class="free-time">
    <breadcrumb :navdata="bdname"></breadcrumb>
    <div class="free-time-content">
      <h2 class="free-title">空余时间选择</h2>
      <ul class="choose-time">
        <li class="choose-time-title">
          <strong class="time-data" v-if="nowWeek.length!=0">{{nowWeek[0].year + '/' + nowWeek[0].date}}-{{nowWeek[6].year + '/' +  nowWeek[6].date}}</strong>
          <span class="span" :class="{'gray':nowWeekIndex==0}" @click="minusWeek">上一周</span>
          <span class="span" :class="{'gray':nowWeekIndex==weekArr.length-1}" @click="addWeek">下一周</span>
          <span class="span" @click="selectTime">选择时间</span>
        </li>

        <li class="week-title choose">
          <span class="course-time"></span>
          <span v-for="(item,key) in nowWeek" :key="'nowWeek'+key">周{{weekText[key] + item.date}}</span>
        </li>

        <li class="choose choose-grid">
          <span class="course-time">上午(09:30-12:00)</span>
          <span v-for="(item,key) in nowWeek" :key="'morning'+key" :class="{'disable':item.disable,'selected':item.morning}"
          @click="selectDate('morning',key,item.disable)">
            <i class="icon-dagou" v-show="item.morning"></i>
          </span>
        
        </li>

        <li class="choose choose-grid">
          <span class="course-time">下午(14:30-17:00)</span>
          <span v-for="(item,key) in nowWeek" :key="'afternoon'+key" :class="{'disable':item.disable,'selected':item.afternoon}"
          @click="selectDate('afternoon',key,item.disable)">
            <i class="icon-dagou" v-show="item.afternoon"></i>
          </span>
         
        </li>

        <li class="choose choose-grid">
          <span class="course-time">晚上(19:00-21:30)</span>
          <span v-for="(item,key) in nowWeek" :key="'evening'+key" :class="{'disable':item.disable,'selected':item.evening}"
          @click="selectDate('evening',key,item.disable)">
            <i class="icon-dagou" v-show="item.evening"></i>
          </span>
        </li>

        <li class='fast-shoose'>
          <span class='shoose-btn' @click="reuseEveryWeek">课表复用到每一周</span>
          <span class='shoose-btn' @click="fastSlect" >快捷选择时间</span>
          <span class='shoose-btn' @click='weekEndSelect'>周末全选</span>
        </li>

        <li class="choose remark">
          <span class="course-time">备注</span>
          <textarea 
            placeholder="如果有什么想要班主任小姐姐了解的情况（比如超级喜欢哪个讲师），可以在这里输入" 
            class="textarea" v-model="remark"
          ></textarea>
        </li>
      </ul>
      <div class="submit-wrapper">
        <span class="submit-btn" @click="close">关闭</span>
        <span class="submit-btn sure" @click='handelSubmit'>确定</span>
      </div>
    </div>

    <div class="choose-time-dialog">
      <!-- 选择时间弹窗 -->
      <el-dialog title="选择时间" ref="dialog" :show-close='true'  :visible.sync="applyDialog" class="apply-dialog">
        <div class="change-page">
          <span @click='upWeekPageSwitch'>上一页</span>
          <span @click='downWeekPageSwitch'>下一页</span>
        </div>
        <div class="choose-time-date">
          <span v-for="(item,key) in weekPageSwitch" :key="key + 'weekPageSwitch'" :class="{'selected':nowWeekIndex==(weekSwitchPage*12+key)}"
          @click="weekSwitch(key)">{{item.week[0].date}} - {{item.week[item.week.length-1].date}}</span>
        </div>
      </el-dialog>

      <!-- 复用到每一周 -->
      <el-dialog 
        title="复用到每一周" 
        ref="dialog" 
        :show-close='true'  
        :visible.sync="weekDialog" 
        :close-on-click-modal="false"
        class="apply-dialog weekDialog"
      >
        <p class="notify">点击下面格子选择你想复用的星期</p>
        <div class="change-page">
          <span @click='upWeekPage'>上一页</span>
          <span @click='downWeekPage'>下一页</span>
        </div>
        <div class="choose-time-date">
          <span v-for="(item,key) in weekPageArr" :key="key + 'weekPageAr'" :class="{'disable':item.disable,'selected':item.selected}"
          @click="webSelectWeek(item.disable,key)">{{item.week[0].date}} - {{item.week[item.week.length-1].date}}</span>
        </div>
        <div class="btn-wrapper">
          <span @click="weekDialog = false">关闭</span>
          <span class="sure" @click="webCheckEveryWeek">确定</span>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import mixins from 'plus/mixin';
import selectDate from 'plus/mixins/selectDate';
import { mapGetters } from 'vuex';
import breadcrumb from "basic/breadcrumb/breadcrumb"
export default {
  name: 'webSlectData',
  mixins: [selectDate],

  components: {
    breadcrumb
  },

  created(){
   this.$set(this.bdname, 2, {
     name: this.freeTime.courseName
   })
  },
  mounted(){
    
  },
  data(){
    return {
      bdname: [
        {
          name: '首页',
          url: '/'
        },
        {
          name: '开班计划',
          url: '/classList'
        }, 
      ],
      applyDialog: false,
      weekDialog: false,
      currentWeekPage:0,
      weekSwitchPage:0
    }
  },

  computed: {
    ...mapGetters(['freeTime']),
    weekPageSwitch(){
      let start = this.weekSwitchPage*12
      if(start+12 > this.weekArr.length){
        return this.weekArr.slice(start,this.weekArr.length)
      }else{
         return this.weekArr.slice(start,start+12)
      }
    },
    weekPageArr(){
      let start = this.currentWeekPage*12
      if(start+12 > this.weekArr.length){
        return this.weekArr.slice(start,this.weekArr.length)
      }else{
         return this.weekArr.slice(start,start+12)
      }
    }
  },
  methods: {
    upWeekPage(){
      console.log('up')
      if(this.currentWeekPage == 0){
        return
      }else{
        this.currentWeekPage--
      }
    },
    downWeekPage(){
      console.log('down')
      let start = this.currentWeekPage*12
      if(start+12 > this.weekArr.length){
        return
      }else{
        this.currentWeekPage++
      }
    },
    upWeekPageSwitch(){
      console.log('up')
      if(this.weekSwitchPage == 0){
        return
      }else{
        this.weekSwitchPage--
      }
    },
    downWeekPageSwitch(){
      console.log('down')
      let start = this.weekSwitchPage*12
      if(start+12 > this.weekArr.length){
        return
      }else{
        this.weekSwitchPage++
      }
    },
    weekSwitch(key){
      this.nowWeekIndex = this.weekSwitchPage*12+key;
      this.nowWeek = this.weekArr[this.nowWeekIndex].week
    },
    // 选择时间
    selectTime(){
      this.applyDialog = true
    },
    // 快捷选择时间
    fastSlect(){
      this.$router.push({
        path:'/fastSlect',
        query:{
          id:this.$route.query.id,
          hcId:this.$route.query.hcId,
          type:this.$route.query.type
        }
      })
    },
    // 复用到每一周
    reuseEveryWeek(){
      let isShow = this.showSelectWeek()
      if(isShow){
        this.weekDialog = true
      }else{
        this.$message({
            message: '请先选择空闲时间!',
            type: 'warning'
        })
      }
    },
    webSelectWeek(disable,key){
        if(disable) return
        let start = this.currentWeekPage*12
        this.weekArr[key+start].selected = !this.weekArr[key+start].selected

    },
    webCheckEveryWeek(){
      let copyWeek = this.weekArr.slice()
      copyWeek.map(item=>{
          if(item.selected){
              this.nowWeek.map((citem,key)=>{
                if(!citem.disable){
                  item.week[key].morning = citem.morning
                  item.week[key].afternoon = citem.afternoon
                  item.week[key].evening = citem.evening
                }
                  
              })
          }
      })
      this.weekArr = copyWeek
      this.weekDialog = false

    },
    close(){
      this.$confirm('如果您退出的话，系统不会保存你所编辑的数据哟~是否确认退出？', '提示', {
        confirmButtonText: '我再想想',
        cancelButtonText: '狠心离开',
        customClass: 'class-plan-msg'
      }).then(() => {
        
      }).catch(() => {
        setTimeout(()=>{
          this.$router.back(-1)
        }, 500)
      });
    }
  }
}
</script>

<style lang="stylus" scoped>
 @import "~style/base"

  .free-time
    background-color $color-person-bg
    padding-bottom 120px

  .free-time-content
    width 1200px
    margin 28px auto 0
    background-color #fff
    border-radius 4px

    .free-title
      height 64px
      padding-left 20px
      line-height 64px
      font-size $font-size-medium-x
      font-family MicrosoftYaHei-Bold
      border-bottom 1px solid $color-myOrder-border
      @extend .borderBox
    
    .choose-time
      padding: 45px 60px 20px 30px
      border-bottom 1px solid #eee
      @extend .borderBox
      
      // 日期标题
      .choose-time-title
        height 14px
        padding-left 20px
        margin-bottom 15px
        font-size $font-size-medium
        line-height 14px
        @extend .borderBox

      .span
        margin-left 32px
        color $color-person-btn
        cursor pointer
      
      .gray
        color #ccc

      // 日期选择
      .choose
        @extend .clear-fix

        span
          float left
          height 44px
          text-align center
          line-height 44px
          @extend .borderBox
          
        span + span 
          width 125px
          margin-left 10px
          border 1px solid #ccc
          
        .course-time
          width 160px
          margin-right 5px
          font-size $font-size-medium
          font-weight bold
        
        .item-choose
          background-color $color-background-more
          border none
      
      .choose + .choose
        margin-top 10px

      .choose-grid span + span
        font-size 12px
        line-height 44px
        text-align center
        transition .3s
        cursor pointer
        .icon-dagou:before
          color $color-btn-border
        &:hover
          background-color $color-background-more
          border-color $color-background-more
          .icon-dagou:before
            color #fff
      .disable
          background rgba(245,245,245,1);
          &:hover
            background rgba(245,245,245,1) !important
            border-color #ccc !important
      .selected
        background-color $color-background-more
        border-color $color-background-more
        .icon-dagou:before
          color #fff !important
      .week-title span + span
        font-size $font-size-medium
        font-weight bold
        border none
      
      // 快速选择
      .fast-shoose
        margin 30px 0
        padding-left 20px
        @extend .clear-fix
          
        .shoose-btn
          float left
          width 144px
          height 44px
          background-color $color-person-btn
          text-align center
          line-height 44px
          color #fff
          font-size $font-size-medium
          border-radius 2px
          cursor pointer
          transition .3s
          &:hover
            background-color $color-background-more

        .shoose-btn + .shoose-btn
          margin-left 30px

      // 备注
      .remark
        .course-time
          padding-right 20px
          margin-right 15px
          font-weight normal
          text-align right
          @extend .borderBox
        
        .textarea
          width 935px
          height 142px
          padding 15px 20px
          font-size $font-size-medium
          border-radius 2px
          border 1px solid $color-myOrder-border
          resize none
          @extend .borderBox
  
  // 提交
  .submit-wrapper
    padding 20px 0
    text-align center

    .submit-btn
      display inline-block
      width 88px
      height 32px
      background-color #FFEFED
      text-align center
      color $color-person-btn
      line-height 32px
      border-radius 2px
      border 1px solid $color-person-btn
      font-size $font-size-medium
      cursor pointer
      transition .3s

      &:hover
        background-color $color-background-more
        color #fff
    
    .sure
      margin-left 30px
      background-color $color-person-btn
      color #fff


 
  // 选择时间
  .choose-time-dialog /deep/ .el-dialog
    width 540px
    height 288px
    border-radius 12px
    padding 30px
    @extend .borderBox

    @media (min-width: 1920px) 
      width 560px
      height 318px
      padding 40px 40px 50px

    .el-dialog__header
      height 16px
      padding 0
      line-height @height
      font-size $font-size-medium-x
      font-weight bold
      @media (min-width: 1920px)
        height 18px
        line-height @height
        font-size $font-size-large

    .el-dialog__body
      padding 30px 0 0

      .change-page
        height 16px
        line-height 16px
        // margin 30px 0 20px
        color $color-person-btn
        span
          margin-right 40px
          cursor pointer
      
      .choose-time-date
        margin-top 20px
        @extend .clear-fix
        
        span 
          float left
          width 114px
          height 44px
          border 1px solid #ccc
          text-align center
          line-height 44px
          margin 0 8px 8px 0
          cursor pointer
          @extend .borderBox
        .selected
          background-color $color-background-more
          border-color $color-background-more
          color #fff !important
        .disable
          background rgba(245,245,245,1) !important
          color rgba(204,204,204,1) !important
        .choosed
          background-color $color-person-btn
        
        span:nth-of-type(4n)
          margin-right 0

 // 复用到每一周
.choose-time-dialog /deep/ .weekDialog .el-dialog
  position relative
  height 385px
  @media (min-width: 1920px)
    height 408px
  
  .notify
    height 16px 
    line-height @height
    margin-bottom 20px
    font-size $font-size-medium-x
  
  .btn-wrapper
    position: absolute;
    bottom: 30px;
    right: 30px;
    text-align right 
    span
      display inline-block
      width 116px
      height 32px
      background-color #FFEFED
      border 1px solid $color-person-btn
      color $color-person-btn
      font-size $font-size-medium
      text-align center
      line-height @height
      border-radius 2px
      cursor pointer
      transition .3s
      @extend .borderBox   

      &:hover
        background-color $color-background-more
        color #fff

      @media (min-width: 1920px)
        width 144px
        height 44px
        line-height @height
        font-size $font-size-medium-x
      
    .sure
      margin-left 30px
      background-color $color-person-btn
      color #fff

.el-message-box__wrapper  .el-message-box
  height 288px !important
      
          
        




</style>


